/*
 * @Author: mylesshie@gmail.com
 * @Date: 2020-07-06 15:26:05
 * @LastEditors: mylesshie@gmail.com
 * @LastEditTime: 2020-08-11 16:42:07
 * @description:
 */

import React, { useState, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { View, Keyboard } from 'react-native'
import { Input } from 'react-native-elements'
import Icon from 'react-native-vector-icons/AntDesign'
import Icon2 from 'react-native-vector-icons/FontAwesome'
import EmojiBoard, { defaultProps } from 'react-native-emoji-board'
import * as userActions from '@/actions/user'
import styles from './styles'

const CommentBar = props => {
  const dispatch = useDispatch()
  const [value, setValue] = useState('')
  const [isCollect, setIsCollect] = useState(props.isCollect)
  const [showEmoji, setShowEmoji] = useState(false)
  const [emojiStyle, setEmojiStyle] = useState(styles.emojiBox)

  useEffect(() => {
    setIsCollect(props.isCollect)
  }, [props.isCollect])

  useEffect(() => {
    if (showEmoji) {
      setEmojiStyle(styles.emojiBoxActive)
    } else {
      setEmojiStyle(styles.emojiBox)
    }

    console.log(emojiStyle)
  }, [showEmoji])

  const _onChangeText = text => {
    setValue(text)
  }

  const _submitText = () => {
    if (!value) return
    dispatch(userActions.submitComment(props.articleId, value)).then(() => {
      setValue('')
      setShowEmoji(false)
      Keyboard.dismiss()
      props.onCommentSuccess && props.onCommentSuccess()
    })
  }

  const _collect = () => {
    dispatch(userActions.addCollection(props.articleId)).then(() => {
      setIsCollect(true)
    })
  }

  const _cancelCollect = () => {
    dispatch(userActions.delCollection(props.articleId)).then(() => {
      setIsCollect(false)
    })
  }

  const _inputOnFocus = () => {
    setShowEmoji(false)
  }

  // 表情控制器
  const _openEmoji = () => {
    if (showEmoji) {
      setShowEmoji(false)
    } else {
      Keyboard.dismiss()
      setShowEmoji(true)
    }
  }

  const _emojiClick = e => {
    setValue(value + e.code)
  }

  return (
    <View style={styles.wrap}>
      <View style={styles.top}>
        <View style={styles.leftCont}>
          <Input
            value={value}
            onFocus={_inputOnFocus}
            onChangeText={text => _onChangeText(text)}
            onSubmitEditing={_submitText}
            placeholder="请输入评论内容"
            leftIcon={{ name: 'edit', typp: 'ant-design', color: '#ccc' }}
            containerStyle={styles.containerStyle}
            inputStyle={styles.inputStyle}
            inputContainerStyle={styles.inputContainer}
          />
        </View>
        <View style={styles.rightCont}>
          { value ? <Icon2 name="send" size={20} color="#D2363A" onPress={_submitText} />:<Icon2 name="send-o" size={20} color="#ccc" />}
          <Icon name="smileo" size={20} color="#ccc" onPress={_openEmoji} />
          {isCollect ? (
            <Icon name="star" size={20} color="#D2363A" onPress={_cancelCollect}/>
          ) : (
            <Icon name="staro" size={20} color="#ccc" onPress={_collect}/>
          )}
        </View>
      </View>
     
      <EmojiBoard
        showBoard={showEmoji}
        onClick={_emojiClick}
        containerStyle={emojiStyle}/>
    </View>
  )
}

export default CommentBar
